<template>
	<div>
		<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
			<a-row :gutter="24" :span="12">
				<a-col :span="12" :wrapper="16">
					<a-form-item label="用户昵称" prop="nickName">
						<a-input v-decorator="['nickName', { rules: [{ required: true, message: '请输入用户昵称' }] }]" />
					</a-form-item>
				</a-col>
				<a-col :span="12" :wrapper="16">
					<a-form-item label="归属部门">
						<a-tree-select
							show-search
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择归属部门"
							allow-clear
							tree-default-expand-all
						>
							<a-icon slot="suffixIcon" type="smile" />
							<a-tree-select-node key="0-1" value="若依科技" title="若依科技">
								<a-tree-select-node key="0-1-1" value="深圳总公司" title="深圳总公司">
									<a-tree-select-node key="random" value="研发部门" title="研发部门" />
									<a-tree-select-node key="random1" value="市场部门" title="市场部门" />
									<a-tree-select-node key="random2" value="测试部门" title="测试部门" />
									<a-tree-select-node key="random3" value="财务部门" title="财务部门" />
									<a-tree-select-node key="random4" value="运维部门" title="运维部门" />
								</a-tree-select-node>
								<a-tree-select-node key="0-1-2" value="长沙分公司" title="长沙分公司">
									<a-tree-select-node key="random5" value="市场部" title="市场部">
										<a-tree-select-node key="random6" value="财务部" title="财务部"></a-tree-select-node>
									</a-tree-select-node>
								</a-tree-select-node>
							</a-tree-select-node>
						</a-tree-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" :span="12">
				<a-col :span="12" :wrapper="16">
					<a-form-item label="手机号码">
						<a-input v-decorator="['phonenumber', { rules: [{ whitespace: true }, { validator: phoneCheck.bind(this) }] }]" />
					</a-form-item>
				</a-col>
				<a-col :span="12" :wrapper="16">
					<a-form-item label="邮箱地址">
						<a-input
							v-decorator="[
								'email',
								{
									rules: [
										{
											type: 'email',
											message: '请输入正确的邮箱!',

											trigger: ['blur', 'change'],
										},
									],
								},
							]"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" :span="12">
				<a-col :span="12" :wrapper="16">
					<a-form-item label="用户名称" prop="userName">
						<a-input v-decorator="['userName', { rules: [{ required: true, message: '请输入用户昵称' }] }]" />
					</a-form-item>
				</a-col>
				<a-col :span="12" :wrapper="16">
					<a-form-item label="用户密码" prop="password">
						<a-input
							v-decorator="[
								'password',
								{
									rules: [{ required: true, message: '请输入密码!' }],
								},
							]"
							type="password"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" :span="12">
				<a-col :span="12" :wrapper="16">
					<a-form-item label="用户性别">
						<a-select v-decorator="['sex', { rules: [{}] }]" placeholder="请选择性别" @change="handleSelectChange">
							<a-select-option value="male"> 男 </a-select-option>
							<a-select-option value="female"> 女 </a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12" :wrapper="16">
					<a-form-item label="状态" prop="status">
						<a-radio-group v-model="value" @change="onChange">
							<a-radio :value="1"> 正常 </a-radio>
							<a-radio :value="2"> 停用</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" :span="12">
				<a-col :span="12" :wrapper="16">
					<a-form-item label="岗位">
						<a-select v-decorator="['postIds', { rules: [{}] }]" placeholder="请选择岗位" @change="handleSelectChange">
							<a-select-option value="chairman"> 董事长 </a-select-option>
							<a-select-option value="manager"> 项目经理</a-select-option>
							<a-select-option value="hr"> 人力资源</a-select-option>
							<a-select-option value="staff"> 普通员工</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12" :wrapper="16">
					<a-form-item label="角色">
						<a-select v-decorator="['roleIds', { rules: [{}] }]" placeholder="请选择角色" @change="handleSelectChange">
							<a-select-option value="Ordinary"> 普通角色 </a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="21" pull="3">
					<a-form-item label="备注">
						<a-textarea placeholder="请输入内容" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
				<a-button type="primary" html-type="submit"> 提交 </a-button>
				<a-button type="primary" style="margin-left: 10px" html-type="reset"> 重置 </a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: 1,
			// value: undefined,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, { name: 'coordinated' }),
		};
	},
	methods: {
		phoneCheck(rule, value, callbackFn) {
			// const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/  // 手机号正则
			// 电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）
			const reg =
				/^(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;
			if (!reg.test(value)) {
				callbackFn('手机号码格式不正确');
				return;
			}
			callbackFn();
		},
		// 状态选择
		onChange(e) {
			console.log('radio checked', e.target.value);
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		handleSelectChange(value) {
			console.log(value);
			this.form.setFieldsValue({
				note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
			});
		},
	},
};
</script>
